<template>
    <el-drawer title="我是标题" :visible.sync="dialogVisible" @opened="opens" :with-header="false" class="demand_box" size='720px' @close="resetForm()">
        <div class="flexbox flexcolumn height_100" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
            <div class="demand_head flexbox flexcenter flexbetween">
                <span class="demand_title">{{title}}</span>
                <span class="icon_btn icon_btn_32" @click="resetForm()"><img src="../../assets/img/close_check.svg" alt=""></span>
            </div>
            <div class="demand_center flex">
                <div class="view_title">托管对象</div>
                <el-table :data="subForm.ad_ids" class="com_table" max-height="320px" style="margin-top:20px">
                    <el-table-column prop="name" label="计划名称">
                    </el-table-column>
                    <el-table-column prop="ad_id" label="计划 ID" width="170">
                    </el-table-column>
                </el-table>
                <div class="view_title mt_12">托管规则</div>
                <div class="bind_rules">
                    <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">规则设置</div>
                        <div class="vw_right flex">
                            满足以下所有条件时生效
                            <template v-for="(item,index) in this.subForm.rules">
                                <p :key="index">
                                    {{index+1}}
                                    <template v-if="item.rule_types==1">消耗</template>
                                    <template v-else-if="item.rule_types==2">直接支付ROI</template>
                                    <template v-else-if="item.rule_types==3">转化成本</template>
                                    <template v-else-if="item.rule_types==4">成交订单金额</template>
                                    <template v-else-if="item.rule_types==5">成交订单数</template>
                                    <template v-if="item.rule_where==1">大于等于</template>
                                    <template v-else-if="item.rule_where==2">小于等于</template>
                                    {{item.rule_values}}
                                </p>
                            </template>
                        </div>
                    </div>
                    <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">执行操作</div>
                        <div class="vw_right flex">衍生计划</div>
                    </div>
                    <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">检查频率</div>
                        <div class="vw_right flex">每5分钟</div>
                    </div>
                </div>
                <div class="view_title mt_12">衍生计划设置</div>
                <div class="bind_rules">
                    <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">计划衍生总条数</div>
                        <div class="vw_right flex">{{subForm.set.max_deivenumber}}条</div>
                    </div>
                    <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">单计划每次衍生</div>
                        <div class="vw_right flex">{{subForm.set.deive_number}}条</div>
                    </div>
                    <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">单计划最多衍生</div>
                        <div class="vw_right flex">{{subForm.set.max_number}}次</div>
                    </div>
                    <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">衍生间隔</div>
                        <div class="vw_right flex">{{subForm.set.deive_gap}}h</div>
                    </div>
                    <!-- <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">新广告组日预算</div>
                        <div class="vw_right flex">{{subForm.set.day_budget }}条</div>
                    </div> -->
                    <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">素材优选</div>
                        <div class="vw_right flex">{{subForm.set.marterial_good==1?"是":"否"}}</div>
                    </div>
                    <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">衍生计划名称</div>
                        <div class="vw_right flex">{{subForm.set.deive_name}}</div>
                    </div>
                </div>
                <div class="view_title mt_12">修改计划设置</div>
                <div class="bind_rules">
                    <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">是否开启</div>
                        <div class="vw_right flex">{{subForm.set.ad_updata==1?"是":"否"}}</div>
                    </div>
                    <div class="flexbox flexcenter bind_item" v-if="subForm.set.ad_uptypes.length>0">
                        <div class="vw_left">类型选择</div>
                        <div class="vw_right flex">{{subForm.set.ad_uptypes.toString()}}</div>
                    </div>
                    <div class="flexbox flexcenter bind_item" v-if="isSelect('出价')">
                        <div class="vw_left">出价</div>
                        <div class="vw_right flex">{{subForm.set.quote.adjust==1?"上调":"下调"}}{{subForm.set.quote.dmin}} - {{subForm.set.quote.dmax}}</div>
                    </div>
                    <div class="flexbox flexcenter bind_item" v-if="isSelect('支付roi')">
                        <div class="vw_left">支付roi</div>
                        <div class="vw_right flex">{{subForm.set.play_roi.adjust==1?"上调":"下调"}}{{subForm.set.play_roi.dmin}} - {{subForm.set.play_roi.dmax}}</div>
                    </div>
                    <div class="flexbox flexcenter bind_item" v-if="isSelect('创意分类')">
                        <div class="vw_left">创意分类</div>
                        <div class="vw_right flex">
                            <div v-for="(item,index) in subForm.set.class"  :key="index" class="r_cascader">
                                <el-cascader disabled v-model="item.idStr" :options="industryList" ref="industryRef" :props="{label:'industry_name',value:'industry_id',}" style="width:100%"></el-cascader>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="view_title mt_12">通知设置</div>
                <div class="bind_rules">
                    <div class="flexbox flexcenter bind_item">
                        <div class="vw_left">通知人员</div>
                        <div class="vw_right flex">
                            {{this.subForm.notice.toString()}}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </el-drawer>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            loading: false,
            title: "",
            dialogVisible: false,
            industryList:[],
            subForm: {
                ad_ids: [],
                rule_types: 1,
                rules: [
                    {
                        rule_types: null,
                        rule_where: null,
                        rule_values: null,
                    },
                ],
                set: {
                    deive_number: "",
                    max_number: "",
                    deive_gap: 1,
                    day_budget: "",
                    marterial_good: 1,
                    deive_name: "",
                    ad_updata: 1,
                    ad_uptypes: [],
                    quote: {},
                    play_roi: {},
                    class: [],
                },
                notice:[]
            },
        };
    },
    created() {
        
    },
    methods: {
        resetForm() {
            this.dialogVisible = false;
        },

        getData(row) {
            this.dialogVisible = true;
            this.title = row.name;
            this.getDetails(row.id);
            this.getIndustryList()
        },

        //获取详情
        async getDetails(id) {
            this.loading = true;
            const { data: res } = await this.$http.post(
                "autodrop/Derive/deriveShow",
                {
                    id: id,
                }
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                let ad_ids = [];
                for (let i in res.data.adlist) {
                    ad_ids.push({
                        ad_id: res.data.adlist[i].ad_id,
                        name: res.data.adlist[i].ad_name,
                    });
                }
                this.subForm.ad_ids = ad_ids;
                this.subForm.rule_types = res.data.rule_types;
                this.subForm.rules = res.data.rulelist;
                this.subForm.set = res.data.set;
                this.subForm.notice = res.data.notice.map(item=>{return item.nickname})
                let textArr = []
                let textObject = {
                    "1":"出价",
                    "2":"支付roi",
                    "3":"创意分类",
                }
                for(let i in this.subForm.set.ad_uptypes){
                    textArr.push(textObject[this.subForm.set.ad_uptypes[i]])
                }
                this.subForm.set.ad_uptypes = textArr.filter(Boolean)
                let idArr = []
                for(let i in this.subForm.set.class){
                    idArr.push({
                        idStr:[this.subForm.set.class[i].first_industry_id,this.subForm.set.class[i].second_industry_id,this.subForm.set.class[i].third_industry_id]
                    })
                }
                this.subForm.set.class = idArr
                if(this.subForm.set.quote==null){
                    this.subForm.set.quote = {
                        dmin: "",
                        dmax: "",
                        adjust:null,
                    }
                }
                if(this.subForm.set.play_roi==null){
                    this.subForm.set.play_roi = {
                        dmin: "",
                        dmax: "",
                        adjust:null,
                    }
                }
            }
        },


        //获取分类列表
        async getIndustryList() {
            const { data: res } = await this.$http.post(
                "launch/Getinfo/industry_list"
            );
            if (res.code !== 200) {
                this.$message.error(res.msg);
                return;
            } else {
                this.industryList = this.treeData(res.data);
            }
        },
        // 创意分类树形结构
        treeData(arr) {
            let first = [];
            arr.forEach((item) => {
                if (item.level == 1) {
                    first.push(item);
                }
            });
            first.forEach((item) => {
                item.children = [];
                arr.forEach((i) => {
                    if (
                        item.first_industry_id == i.first_industry_id &&
                        i.level == 2
                    ) {
                        item.children.push(i);
                    }
                });
            });
            first.forEach((item) => {
                item.children.forEach((i) => {
                    i.children = [];
                    arr.forEach((a) => {
                        if (
                            i.second_industry_id == a.second_industry_id &&
                            a.level == 3
                        ) {
                            i.children.push(a);
                        }
                    });
                });
            });
            return first;
        },

        isSelect(types) {
            let is_true = false;
            if (this.subForm.set.ad_uptypes.includes(types)) {
                is_true = true;
            }
            return is_true;
        },
    },
    components: {},
};
</script>


<style scoped>
.view_title {
    font-size: 14px;
    color: #17233d;
    font-weight: bold;
}
.mt_12 {
    margin-top: 20px;
}
.vw_left {
    width: 150px;
    font-size: 14px;
    color: #616c85;
    flex-shrink: 0;
}
.vw_right {
    font-size: 14px;
    line-height: 20px;
}
.view_rules {
    padding: 12px;
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin-top: 12px;
}
.blue_tips {
    color: #4475ff;
}
.bind_rules {
    background-color: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    margin-top: 12px;
    padding: 6px 12px;
}
.bind_item {
    padding: 10px 0;
}
.vw_trigger {
    padding-bottom: 12px;
    border-bottom: 1px solid #ebebeb;
    line-height: 20px;
    margin-bottom: 12px;
}
.vw_trigger:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.text_line {
    line-height: 30px;
}
</style>

<style>
.r_cascader .el-input.is-disabled .el-input__inner{
    background: none;
    border:none;
    color: #616c85;
    cursor: default;
    padding: 0;
    line-height: 22px;
    height: 22px;
}
.r_cascader .el-input__suffix{
    display: none;
}
.r_cascader .el-cascader{
    line-height: 22px;
}
</style>

